<template>
    <div>
      <!-- 新增全勤奖规则 -->
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="span1">新增全勤奖规则</span>
          </div>
          <div class="text item1">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="方案名称：" prop="name">
                <el-input v-model="ruleForm.name" class="input1"></el-input>
                <el-checkbox
                  label="默认"
                  name="type"
                  style="margin-left: 20px"
                ></el-checkbox>
              </el-form-item>
              <el-form-item label="状态：" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
              </el-form-item>
              <el-form-item label="发放规则：" prop="deliverys">
                <el-switch v-model="ruleForm.deliverys"></el-switch>
              </el-form-item>
              <!-- 如果发放规则为false -->
              <div
                v-if="ruleForm.deliverys === false"
                style="margin-bottom: 30px"
              >
                <span style="margin-left: 100px">全员享受优惠</span>
              </div>
              <!-- 如果发放规则为true -->
              <div
                v-if="ruleForm.deliverys === true"
                style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
              >
                <div style="margin-bottom: 20px">
                  满足一下条件的人员可享受全勤奖
                </div>
                <div style="margin-bottom: 20px">
                  <span>员工状态:</span>
                  <span style="margin-left: 30px"
                    ><input type="checkbox" style="margin-right: 5px" />试用</span
                  >
                  <span style="margin-left: 50px"
                    ><input type="checkbox" style="margin-right: 5px" />正式</span
                  >
                </div>
                <div>
                  <span>工作性质:</span>
                  <span style="margin-left: 30px"
                    ><input type="checkbox" style="margin-right: 5px" />全职</span
                  >
                  <span style="margin-left: 50px"
                    ><input type="checkbox" style="margin-right: 5px" />兼职</span
                  >
                  <span style="margin-left: 50px"
                    ><input
                      type="checkbox"
                      style="margin-right: 5px"
                    />实习生</span
                  >
                  <span style="margin-left: 50px"
                    ><input
                      type="checkbox"
                      style="margin-right: 5px"
                    />劳务派遣</span
                  >
                  <span style="margin-left: 50px"
                    ><input type="checkbox" style="margin-right: 5px" />外包</span
                  >
                </div>
              </div>
              <el-form-item label="扣款规则:" prop="deliverys1">
                <el-switch v-model="ruleForm.deliverys1"></el-switch>
              </el-form-item>
              <!-- 扣款规则为false -->
              <div
                v-if="ruleForm.deliverys1 === false"
                style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
              >
                <span>全员发放全勤奖</span>
              </div>
              <!-- 扣款规则为true -->
              <div
                v-if="ruleForm.deliverys1 === true"
                style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
              >
                <div style="margin-bottom: 20px">
                  发生以下任意情况，扣发全勤奖：
                </div>
                <div style="margin-bottom: 20px">
                  <input type="checkbox" v-model="checkboxa"/><span style="margin-left: 10px" @click="checkall()"
                    >全选</span
                  >
                </div>
                <div>
                  <span><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox2"/>迟到早退</span>
                  <span style="margin-left: 50px;"><input
                      type="checkbox"
                      style="margin-right: 10px"
                      v-model="checkbox1.checkbox3"
                    />缺勤</span
                  >
                  <span style="margin-left: 50px;">
                      <input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox4"/>年假
                  </span>
                  <span style="margin-left: 50px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox5"/>调休</span>
                  <span style="margin-left: 50px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox6"/>事假</span>
                  <span style="margin-left: 50px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox7"/>安假</span>
                  <span style="margin-left: 50px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox8"/>探亲假</span>
                  <span style="margin-left: 50px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox9"/>哺乳假</span><br/>
                  <span><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox10"/>产假</span>
                  <span style="margin-left: 80px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox11"/>其他假期</span>
                  <span style="margin-left: 20px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox12"/>育儿假</span>
                  <span style="margin-left: 35px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox13"/>陪产假</span>
                  <span style="margin-left: 35px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox14"/>产检假</span>
                  <span style="margin-left: 35px;"><input type="checkbox" style="margin-right: 10px" v-model="checkbox1.checkbox15"/>病假</span>
                </div>
              </div>
              <el-form-item label="备注：" v-if="ruleForm.deliverys1 === true">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 10 }"
                  placeholder="请输入内容"
                  v-model="textarea2"
                  class="input2"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <!-- 底部栏 -->
      <div class="bottom">
        <el-card class="box-card1">
          <el-button plain @click="$router.push('/home/encourage')">返回</el-button>
          <el-button plain>取消</el-button>
          <el-button type="primary" plain>保存</el-button>
        </el-card>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        //新增假期计薪规则
        ruleForm: {
          name: "",
          delivery: true,
          //发放规则
          deliverys: true,
          //扣款规则
          deliverys1: true,
        },
        //新增假期计薪规则输入的规范
        rules: {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          ],
        },
        //新增假期计薪规则的多行文本框
        textarea2: "",
        //多选框
        checkboxa:false,
        checkbox1:{
          checkbox2:false,
          checkbox3:false,
          checkbox4:false,
          checkbox5:false,
          checkbox6:false,
          checkbox7:false,
          checkbox8:false,
          checkbox9:false,
          checkbox10:false,
          checkbox11:false,
          checkbox12:false,
          checkbox13:false,
          checkbox14:false,
          checkbox15:false,
        }
      };
    },
    methods:{
      checkall(){
          // if()
      }
    }
  };
  </script>
  
  <style scoped>
  .span1 {
    font-size: 18px;
    font-weight: bold;
  }
  .box-card {
    width: 80%;
  }
  .input1 {
    width: 450px;
    height: 35px;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left: -20px;
  }
  </style>